import React,   {  Component } from 'react'
import PropTypes from 'prop-types'

export default class List extends Component {

    static propTypes = {
        // keyword:function(props,propName,componentName){
        //     if(props.keyword !== 'abc'){
        //         return new Error();
        //     }
        // }

        keyword: PropTypes.isRequired
    }


    static defaultProps = {
        keyword :'null, please input'
    }

    state = {
        list:['task1','task2']
    }

    handleClick(index){
        this.state.list.splice(index,1);
        this.setState({})
    }

    UNSAFE_componentWillReceiveProps (props){
        this.setState({
            list:[
                ...this.state.list,
                props.keyword
            ]
        })
    }

    render(){
        return (
            <ul>
                {
                   [
                    this.state.list.map((value, index) => {
                        return (
                            <li key={value+index}>{value}
                                <button onClick={this.handleClick.bind(this,index)}>X</button>
                            </li>
                                
                        
                        )
                    })
                   ]
                }
                {/* <li>
                    {this.props.children}
                </li> */}
            </ul>
        )
    }
}

// List.defaultProps = {
//     keyword : 'aaa'
// }